<!-- 消息中心 -->
<template>
	<view class="container">

		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="消息中心" rightBtnType="msgCenter" colorTheme="black" @toggleMenuListHandler="toggleMenuListHandler">
			</navHeader>
		</view>

		<!-- 消息列表 -->
		<view class="messageList">
			<view class="row-between messageView" @click="navTo('systemNotice','1')" hover-class="cell-hover" :hover-stay-time="50">
				<view class="row-between">
					<image class="msgImage" :src="icon.sysMessage" mode=""></image>
					<view class="msgText">系统消息</view>
				</view>
				<view class="row-between">
					<uni-badge class="number" v-if="system" :text="system" type="warning" size="small" />
					<uni-icons type="arrowright" style="font-size: 24rpx;" color="#999999" />
				</view>
			</view>
			<view class="boderView"></view>
			<view class="row-between messageView" @click="navTo('systemNotice','2')" hover-class="cell-hover" :hover-stay-time="50">
				<view class="row-between">
					<image class="msgImage" :src="icon.orderMessage" mode=""></image>
					<view class="msgText">订单消息</view>
				</view>
				<view class="row-between">
					<uni-badge class="number" v-if="order" :text="order" type="warning" size="small" />
					<uni-icons type="arrowright" style="font-size: 24rpx;" color="#999999" />
				</view>
			</view>
		</view>

		<!-- 消息列表 -->
		<!-- <view class="oneRow">
			<view class="list-cell b-b radiusT10" @click="navTo('systemNotice','1')" hover-class="cell-hover" :hover-stay-time="50">
				<image class="sysMessage" :src="icon.sysMessage" mode=""></image>
				<view class="cell-tip">系统消息</view>
				<view class="cell-tip tipsNumber-Container">
					<view class="tipsNumber" v-if="system">{{system}}</view>
				</view>
				<uni-icons type="arrowright" size="12" color="#999999"/>
			</view>
			<view class="list-cell radiusB10" @click="navTo('systemNotice','2')" hover-class="cell-hover" :hover-stay-time="50">
				<image class="sysMessage" :src="icon.orderMessage" mode=""></image>
				<view class="cell-tip">
					订单消息
				</view>
				<view class="cell-tip tipsNumber-Container">
					<view class="tipsNumber" v-if="order">{{order}}</view>
					<view class="tipsNumber" >12</view>
				</view>
				<view class="cell-more yticon icon-you"></view>
			</view>
		</view> -->

		<!-- IM列表内容 -->

		<!-- <navigator url="/pages/service/service" class="IMListContent" hover-class="none"> -->
		<view class="IMListContent" @click="openService">
			<view class="row-between contentView">
				<view class="row-between">
					<image class="msgImage" src="/static/assets/kefu.png" mode=""></image>
					<view class="column-between-start textView">
						<view class="textTile">平台客服</view>
						<view class="text-line-clamp-one" style="width: 370upx;">{{$store.state.message || serviceValue || "暂无咨询信息"}}</view>
					</view>
				</view>
				<view class="column-end" style="align-items: flex-end;">
					<view class="time" style="margin-bottom: 35upx;">2020-03-30</view>
					<uni-badge class="number" :text="$store.state.msgNumber" type="warning" size="small" />
				</view>
			</view>
		</view>
		<!-- <button type="primary" plain="true"  @click="openService">启动智齿</button>
		<button type="primary" plain="true" @click="openSobotHelpCenter">启动客户服务中心</button>
		<button type="primary" plain="true" @click="getUnReadMessage">获取未读消息数</button>
		<button type="primary" plain="true" @click="closeSobotChat">关闭智齿</button> -->
		<!-- IM列表内容 -->
		<!-- <view class="oneRow">
			<view class="list-cell b-b radiusT10" @click="navTo('真实姓名')" hover-class="cell-hover" :hover-stay-time="50">
				<image class="sysMessage" :src="icon.sysMessage" mode=""></image>
				<view class="cell-tip">
					<view class="shopName ellipsis1">
						构购自营店
					</view>
					<view class="msgShort ellipsis1">
						店铺聊天消息内容文字消息内容文字...
					</view>
				</view>
				<view class="msgDateNumber-Container">
					<view class="msgDate">
						2020-03-30
					</view>
					<view class="tipsNumber">16</view>
				</view>
			</view>
			<view class="list-cell radiusB10" @click="navTo('真实姓名')" hover-class="cell-hover" :hover-stay-time="50">
				<image class="sysMessage" :src="icon.sysMessage" mode=""></image>
				<view class="cell-tip">
					<view class="shopName ellipsis1">
						构购自营店
					</view>
					<view class="msgShort ellipsis1">
						店铺聊天消息内容文字消息内容文字...
					</view>
				</view>
				<view class="msgDateNumber-Container">
					<view class="msgDate">
						2020-03-30
					</view>
					<view class="tipsNumber">16</view>
				</view>
			</view>
		</view> -->

		<!-- 详情菜单 -->
		<view v-if="showDetailMenu" @click="toggleMenuListHandler()" class="detailMenu-Container">
			<detailMenu></detailMenu>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';

	import navHeader from '@/components/nav-header/nav-header';
	import detailMenu from "@/components/detailMenu/detailMenu";
	// const zhiChiSobot = uni.requireNativePlugin('zhiChi-SobotKit');
	export default {
		components: {
			navHeader,
			detailMenu
		},
		// beforeDestroy(){
		// 	zhiChiSobot.closeSobotChat()
		// },
		data() {
			return {
				icon: {
					backBtn: "/static/images/common/return.png",
					menuBtn: "/static/images/common/msg-center.png",
					sysMessage: "/static/assets/tongzhi.png",
					orderMessage: "/static/images/user/msgCenter/orderMessage.png",
				},

				//详情菜单
				showDetailMenu: false,

				system: '',
				order: '',
				userInfo: null,
				serviceNumber: 0,
				serviceValue: ''
			};
		},
		computed: {
			...mapState(['hasLogin']),
		},
		 onShow() {
			this.showDetailMenu = false;
			// #ifdef APP-PLUS
			this.$store.dispatch("getUnReadMessage")
			uni.getStorage({
				key: 'service',
				success: (res) => this.serviceValue = res.data.value || ''
			})
			// #endif
			let that = this;
			this.$api.globalUtil.requestAjax({
				url: '/customerNoticeApi/customerNoticeUnreadCountApi',
				method: 'POST',
				data: {
					cnType: '1',
					cnStatus: '0'
				},
				success: function(res) {
					that.system = res.data.response;
				}
			});
			this.$api.globalUtil.requestAjax({
				url: '/customerNoticeApi/customerNoticeUnreadCountApi',
				method: 'POST',
				data: {
					cnType: '2',
					cnStatus: '0'
				},
				success: function(res) {
					that.order = res.data.response;
				}
			});
		},
		methods: {
			openService() {
				// #ifdef APP-PLUS
				this.$store.dispatch("openService")
				// #endif
			},
			
			//详情菜单
			toggleMenuListHandler() {
				this.showDetailMenu = !this.showDetailMenu;
			},

			navTo(url, type) {
				uni.navigateTo({
					url: url + '?type=' + type
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background: #F5F5F5;
	}

	/* header部分 */
	.header-Container {
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		box-shadow: 0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);

		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;

			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}

		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}

	/* 消息列表 */
	.messageList {
		background: #FFFFFF;
		border-radius: 10rpx;
		font-family: PingFang SC;
		color: #333333;
		padding: 0upx 30upx;
		margin-bottom: 23upx;

		.messageView {
			padding: 30upx 0upx;

			.msgImage {
				width: 96upx;
				height: 96upx;
			}

			.msgText {
				margin-left: 30upx;
				font-size: 30upx;
				font-weight: 500;
			}
		}
	}

	/* IM列表内容 */
	.IMListContent {
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 0upx 30upx;

		.contentView {
			padding: 30upx 0upx;
			font-family: PingFang SC;
			color: #333333;
			border-bottom: 1upx solid #EDEDED;

			.msgImage {
				width: 88upx;
				height: 88upx;
			}

			.textView {
				font-size: 24upx;
				font-weight: 500;
				color: #999999;
				margin-left: 35upx;

				.textTile {
					font-size: 30upx;
					font-weight: 500;
					color: #333333;
					margin-bottom: 20upx;
				}
			}

			.time {
				font-size: 20upx;
				font-weight: 500;
				color: #999999;
			}

			&:last-of-type {
				border-bottom: none;
			}
		}
	}

	.number {
		background: #FE5E49;
		font-size: 30upx;
	}

	.boderView {
		height: 2upx;
		background: #EDEDED;
	}

	.container {
		.oneRow {
			margin-top: 20rpx;
			// padding: 0 30rpx;
			border-radius: 10rpx;

			.radiusT10 {
				border-radius: 10rpx 10rpx 0 0;
			}

			.radiusB10 {
				border-radius: 0 0 10rpx 10rpx;
			}

			.sysMessage {
				margin-right: 30rpx;
				width: 96rpx;
				height: 96rpx;
			}

			.tipsNumber-Container {
				display: block;
				margin-left: auto;
			}

			.msgDateNumber-Container {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: end;
				margin-left: auto;
				width: 160rpx;
				height: 100%;

				.tipsNumber {
					margin-bottom: 38rpx;
				}
			}

			.tipsNumber {
				display: block;
				padding: 0 8rpx;
				min-width: 30rpx;
				height: 30rpx;
				line-height: 30rpx;
				background: #FE5E49;
				border-radius: 18rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang;
				// font-weight:bold;
				color: rgba(255, 255, 255, 1);
			}

			.shopName {
				max-width: 370rpx;
				font-size: 30rpx;
				font-family: PingFang;
				color: rgba(51, 51, 51, 1);
			}

			.msgShort {
				max-width: 370rpx;
				font-size: 24rpx;
				font-family: PingFang;
				color: rgba(153, 153, 153, 1);
			}

			.msgDate {
				margin-top: 35rpx;
				height: 16rpx;
				line-height: 16rpx;
				font-size: 20rpx;
				font-family: PingFang;
				color: rgba(153, 153, 153, 1);
			}
		}
	}

	.list-cell {
		display: flex;
		align-items: center;
		padding: 0 28rpx 0 28rpx;
		height: 156rpx;
		line-height: 156rpx;
		position: relative;
		background: #fff;
		// justify-content: space-between;

		input {
			text-align: right;
			color: #333333;
		}

		.inputHolder {
			font-size: 28rpx;
			font-family: PingFang;
			// font-weight:500;
			color: rgba(153, 153, 153, 1);
			line-height: 55px;
		}

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30rpx;
			right: 30rpx;
		}

		&.m-t {
			margin-top: 16upx;
		}

		.cell-more {
			align-self: baseline;
			font-size: $font-lg;
			color: $font-color-light;
			margin-left: 10upx;
		}

		.cell-tit {
			flex: 1;
			margin-right: 10upx;
			font-size: 28rpx;
			font-family: PingFang;
			color: #666666;
		}

		.cell-tip {
			font-size: 28rpx;
			font-family: PingFang;
			/* font-weight:500; */
			color: #333333;
			line-height: 55rpx;

			&.unBind {
				color: #D21728;
			}

			&.unSet {
				color: #999999;
			}
		}
	}
</style>
